<!--没有连接-->

<template>
  <div class="student-list">
    <div class="student-list-header">
      <h2>{{ selectedClass.className }} 学生名单</h2>
      <div class="student-count">共 {{ students.length }} 名学生</div>
    </div>

    <div class="student-table-wrapper">
      <div class="student-table-container">
        <table class="student-table">
          <thead>
          <tr>
            <th style="width: 15%">学号</th>
            <th style="width: 15%">姓名</th>
            <th style="width: 10%">性别</th>
            <th style="width: 20%">联系方式</th>
            <th style="width: 10%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr
              v-for="student in students"
              :key="student.id"
              @click="viewStudentDetail(student)"
          >
            <td>{{ student.studentId }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.gender }}</td>
            <td>{{ student.phone }}</td>
            <td>
              <button class="detail-button" @click.stop="viewStudentDetail(student)">
                详情
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 模拟学生数据
const allStudents = ref([
  {
    id: 1,
    studentId: '202101001',
    name: '张三',
    gender: '男',
    phone: '13800138001',
    email: 'zhangsan@example.com',
    enrollmentDate: '2021-09-01',
    dormitory: '东区3栋502',
    classId: 101
  },
  {
    id: 2,
    studentId: '202101002',
    name: '李四',
    gender: '女',
    phone: '13800138002',
    email: 'lisi@example.com',
    enrollmentDate: '2021-09-01',
    dormitory: '东区3栋503',
    classId: 101
  },
  {
    id: 3,
    studentId: '202102001',
    name: '王五',
    gender: '男',
    phone: '13800138003',
    email: 'wangwu@example.com',
    enrollmentDate: '2021-09-01',
    dormitory: '西区2栋301',
    classId: 102
  }
]);

const props = defineProps({
  selectedClass: {
    type: Object,
    default: () => ({
      id: null,
      className: '',
      classCode: '',
      major: '',
      grade: '',
      studentCount: 0
    })
  }
});

const emit = defineEmits(['viewStudentDetail']);

// 获取当前班级的学生
const students = computed(() => {
  return allStudents.value.filter(s => s.classId === props.selectedClass.id);
});

// 查看学生详情
const viewStudentDetail = (student) => {
  emit('viewStudentDetail', student);
};
</script>

<style scoped>
.student-list {
  padding: 20px 0;
}

.student-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.student-list-header h2 {
  color: rgb(147, 26, 106);
  margin: 0;
  font-size: 1.5em;
}

.student-count {
  color: #666;
  font-size: 1.1em;
}

/* 表格滚动容器 */
.student-table-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.student-table-container {
  width: 100%;
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 表格样式 */
.student-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}

.student-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.student-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
}

.student-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.student-table tr:hover {
  background-color: #f5f5f5;
}

.detail-button {
  padding: 6px 12px;
  background-color: rgb(147, 26, 106);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9em;
}

.detail-button:hover {
  background-color: rgb(127, 22, 91);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-table-container {
    max-height: 500px;
  }

  .student-table th,
  .student-table td {
    padding: 8px 12px;
    font-size: 0.9em;
  }
}

@media (max-width: 480px) {
  .student-table-wrapper {
    border-radius: 0;
  }

  .student-table-container {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}
</style>